<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
    <title>娟娟专属-快速筛选出金额不匹配的</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* 以15px为标准 */
            font-size: 14px;
        }

        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        main {
            width: 1000px;
            height: 800px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0px 0px 10px 2px #0303038a;
            overflow: hidden;
        }

        .main {
            width: 200%;
            height: 100%;
            display: flex;
            transition: all .2s;
        }

        .left-main {
            width: 50%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }

        .right-main {
            width: 50%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }

        .end-box {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .data-box {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 40px;
        }

        .data-box>div {
            padding: 10px;
            border: 1px solid #409eff;
            border-radius: 3px;
            font-size: 1em;
            margin-right: 80px;
        }

        .data-box>div>span {
            font-size: 1.1em;
            font-weight: bolder;
        }

        .fail {
            color: #f56c6c;
        }

        .success {
            color: #67c23a;
        }
    </style>
    <link rel="stylesheet" href="../public/css/public.css">
    <link rel="stylesheet" href="../public/css/button.css">
    <link rel="stylesheet" href="../public/css/dialog-message-box.css">
    <link rel="stylesheet" href="../public/css/custom-message-box.css">
    <link rel="stylesheet" href="../public/css/upload-file-box.css">
    <link rel="stylesheet" href="../public/css/loading-box.css">
    <link rel="stylesheet" href="../public/css/input-text-box.css">
    <link rel="stylesheet" href="../public/css/input-select-box.css">
    <link rel="stylesheet" href="../public/css/input-radio-box.css">
    <link rel="stylesheet" href="../public/css/input-checkbox-box.css">
    <link rel="stylesheet" href="../public/css/table-box.css">
    <link rel="stylesheet" href="../public/css/zIndex.css">
    <script src="../public/js/string-util.js"></script>
    <script src="../public/js/public.js"></script>
    <script src="../public/js/custom-message-box.js"></script>
    <script src="../public/js/dialog-message-box.js"></script>
    <script src="../public/js/upload-file-box.js"></script>
    <script src="../public/js/loading-box.js"></script>
    <script src="../public/js/input-text-box.js"></script>
    <script src="../public/js/input-select-box.js"></script>
    <script src="../public/js/input-radio-box.js"></script>
    <script src="../public/js/input-checkbox-box.js"></script>
    <script src="../public/js/table-box.js"></script>
    <script src="../public/js/request-util.js"></script>
</head>

<body>
    <main>
        <div class="main">
            <div class="left-main">
                <button class="lan">下一步</button>
                <div style="width: 80%;">
                    <div
                        style="width: 100%;height: 2px;background: linear-gradient(to right,red,blue,red);margin-top: 10px;">
                    </div>
                    <p style="margin-top: 10px;color: deeppink;">使用帮助</p>
                    <p style="margin-left: 10px;color: deeppink;">1.先上传数据文件（就是那个xls文件）。</p>
                    <p style="margin-left: 10px;color: deeppink;">2.输入数据所在工作簿的名称（默认为Sheet1）。</p>
                    <p style="margin-left: 10px;color: deeppink;">3.点击下一步按钮。</p>
                </div>
            </div>
            <div class="right-main">
                <button class="lv">开始计算生成数据</button>
                <div style="width: 80%;">
                    <div
                        style="width: 100%;height: 2px;background: linear-gradient(to right,red,blue,red);margin-top: 10px;">
                    </div>
                    <p style="margin-top: 10px;color: deeppink;">使用帮助</p>
                    <p style="margin-left: 10px;color: deeppink;">1.先选择金额在文件中那一列的名字-（如：贷方金额、借方金额）。</p>
                    <p style="margin-left: 10px;color: deeppink;">
                        2.选择力度级别，根据自己需要选择(注意的是：当文件过大时，选择大力度，就可能会使服务器内存溢出导致执行失败！).</p>
                    <p style="margin-left: 10px;color: deeppink;">3.最后点击开始计算生成数据按钮。</p>
                </div>
            </div>
        </div>
        <div class="end-box custom-message-content">
            <div class="data-box">
                <div class="init-box">处理数据之前金额总和：
                    <span></span>
                </div>
                <div class="result-box">处理数据之后金额总和：
                    <span></span>
                </div>
                <div class="equal-box">处理前与处理后金额总和是否一致：
                    <span></span>
                </div>
                <button class="lan">下载处理后的文件</button>
            </div>

        </div>
    </main>
    <script>
        // 注册三个浮层
        dialogMessageBoxRun();
        customMessageBoxRun(() => {
            // 直接刷新，释放内存
            document.body.innerHTML = '';
            window.location.reload();
        });
        loadingBoxRun();

        // 开始业务处理
        const mainEl = document.querySelector('.main');
        const leftMainEl = document.querySelector('.left-main');
        const getTitleBtn = leftMainEl.querySelector('.lan');
        const rightMainEl = document.querySelector('.right-main');
        const startBtn = rightMainEl.querySelector('.lv');
        const endBoxEl = document.querySelector('.end-box');
        const initAmountTotal = endBoxEl.querySelector('.init-box > span');
        const resultAmountTotal = endBoxEl.querySelector('.result-box > span');
        const equalStatue = endBoxEl.querySelector('.equal-box > span');
        /* 这个组件在请求里面生成，放到全局，检验的时候使用 */
        let inputSelectBoxEl = null;
        let dataFile = null;
        let sheetName = '';
        let columnName = '';
        let enforcement = '';
        let data = null;
        // ========================================获取标题==============================================
        // 添加全局组件
        const uploadFileBoxEl = addUploadFileBox(file => {
            dataFile = file;
        }, true, ['xls', 'xlsx'], dialogMessageBoxShow);
        const inputTextBoxEl = addInputTextBox(text => {
            sheetName = text;
        }, '工作簿名称:', false);
        leftMainEl.insertAdjacentElement('afterbegin', inputTextBoxEl);
        leftMainEl.insertAdjacentElement('afterbegin', uploadFileBoxEl);
        getTitleBtn.addEventListener('click', () => {
            if (checkInput(uploadFileBoxEl) && checkInput(inputTextBoxEl)) {
                // 检验通过，进行提交
                // 在提交的时候，显示加载中
                loadingBoxShow();
                const getTitleFormData = new FormData();
                getTitleFormData.append('file', dataFile);
                getTitleFormData.append('sheetName', sheetName);
                sendByXhr(BASE_URL + 'accounting/getTitle', response => {
                    // 组装为下拉框的数据
                    const selectDataArr = [];
                    response.map(v => {
                        // [v] 才会把变量的值当作key，否则key就是v
                        selectDataArr.push({ [v]: v });
                    });
                    inputSelectBoxEl = addInputSelectBox(text => {
                        columnName = text;
                    }, '金额所在列的名字:', selectDataArr, true);
                    rightMainEl.insertAdjacentElement('afterbegin', inputSelectBoxEl);
                    // 请求成功关掉
                    loadingBoxClose();
                    // 进入下一页
                    mainEl.style.transform = 'translateX(-50%)';
                }, text => {
                    // 请求失败关掉
                    loadingBoxClose();
                    dialogMessageBoxShow(text);
                }, 'POST', getTitleFormData);
            }
        });
        // =============================================开始计算数据=========================================
        // 添加全局组件
        const inputRadioBoxEl = addInputRadiotBox(text => {
            enforcement = text;
        }, '力度级别', [
            { small: '小力度（只去除1正1负相等的）' },
            { middle: '大力度（去除一正一负、多正一负、多负一正相等的）' }
        ], true);
        rightMainEl.insertAdjacentElement('afterbegin', inputRadioBoxEl);
        startBtn.addEventListener('click', () => {
            if (checkInput(inputSelectBoxEl) && checkInput(inputRadioBoxEl)) {
                // 检验通过，进行提交
                // 在提交的时候，显示加载中
                loadingBoxShow();
                const getComputeFromData = new FormData();
                getComputeFromData.append('file', dataFile);
                getComputeFromData.append('sheetName', sheetName);
                getComputeFromData.append('columnName', columnName);
                getComputeFromData.append('enforcement', enforcement);
                sendByXhr(BASE_URL + 'accounting/getComputeData', response => {
                    // 填充数据
                    initAmountTotal.innerText = response['initAmountTotal'];
                    resultAmountTotal.innerText = response['resultAmountTotal'];
                    if (response['equalStatue']) {
                        equalStatue.classList.add('success');
                        equalStatue.innerText = '一致';
                    } else {
                        equalStatue.classList.add('fail');
                        equalStatue.innerText = '不一致';
                    }
                    // 生成表格
                    data = response['resultExcelData'];
                    const tableBoxEl = addTableBox(14, 1.2, data);
                    endBoxEl.insertAdjacentElement('beforeend', tableBoxEl);
                    // 请求成功关掉
                    loadingBoxClose();
                    // 显示最后数据
                    customMessageBoxShow(endBoxEl, '最终数据处理结果', el => {
                        //需要对克隆后的元素进行添加事件，对原元素添加事件并没有效果
                        el.querySelector('.lan').addEventListener('click', () => {
                            downloadFileByPosst(BASE_URL + 'accounting/downExcelFile', {
                                fileName: dataFile.name,
                                columnName,
                                data: JSON.stringify(data)
                            });
                        });
                    });
                }, text => {
                    // 请求失败关掉
                    loadingBoxClose();
                    dialogMessageBoxShow(text);
                }, 'POST', getComputeFromData);
            }
        });
    </script>
</body>

</html>